<template>
    <div>
        <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>申请管理</el-breadcrumb-item>
                <el-breadcrumb-item>打卡列表</el-breadcrumb-item>
            </el-breadcrumb>

            <div class="handleBox">
                <div>
                    <span>施工员：</span><el-select v-model="selectSaleUserId" placeholder="请选择" @change="getVisitlist"
                        size="small">
                        <el-option v-for="item in saleUserList" :key="item.userId" :label="item.userName"
                            :value="item.userId">
                        </el-option>
                    </el-select>
                </div>
                
                <div>
                    <span>状态：</span><el-select v-model="selectStatus" placeholder="请选择" @change="getVisitlist"
                        size="small">
                        <el-option v-for="item in statusList" :key="item.value" :label="item.text" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <el-button size="mini" @click="updataHandle(1)">通过</el-button>
                <el-button size="mini" @click="updataHandle(2)">驳回</el-button>
            </div>

            <el-table :data="tableList" border style="width: 100%" height="610"
                :header-cell-style="{ background: '#409EFF', color: '#FFF' }" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="userId" label="ID" width="110"></el-table-column>
                <el-table-column prop="userName" label="施工员" width="110"></el-table-column>
                <el-table-column prop="shopName" label="门店名称" width="110"></el-table-column>
                <el-table-column prop="visitDate" label="打卡时间"></el-table-column>
                <el-table-column prop="shopLabel" label="门店主属性"></el-table-column>
                <el-table-column prop="money" label="施工员可获得佣金"></el-table-column>
                <el-table-column prop="applyNote" label="审核意见"></el-table-column>
                <el-table-column label="门店状态" width="100">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.shopStatus == 1">正常营业</el-tag>
                        <el-tag type="danger" v-else>已停业</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="打卡图片">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.visitPic" class="image-control" :previewSrcList="[
                    scope.row.visitPic
                ]">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="80">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.visitApply == 1">已审核</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.visitApply == 2">已驳回</el-tag>
                        <el-tag v-else-if="scope.row.visitApply == 0">未审核</el-tag>
                    </template>
                </el-table-column>
            </el-table>

            <div class="paginationBox">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageNum" :page-sizes="[20, 30, 50]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>

            <el-dialog title="驳回" :visible.sync="auditReject" width="600px">
                <el-form :model="record" ref="oilform">
                    <el-form-item label="驳回原因">
                        <el-input v-model="record.message" placeholder="请输入驳回原因"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="auditReject = false">取 消</el-button>
                    <el-button type="primary" @click="sumbitReturnRecord()">确 定</el-button>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>
<script>
import { getSaleUser, listShopVisit, applyShopVisit } from '../../network/preparer'
export default {
    name: 'couInfo',
    data() {
        return {
            tableList: [],
            statusList: [
                {
                    value: '-1',
                    text: '全部'
                },
                {
                    value: 0,
                    text: '未审核'
                },
                {
                    value: 1,
                    text: '已审核'
                },
                {
                    value: 2,
                    text: '已驳回'
                }
            ],
            selectStatus: '-1',
            selectRecord: '',
            saleUserList: [],//施工员列表
            selectSaleUserId: '-1',
            checkList: [],
            pageNum: 1,
            pageSize: 20,
            total: 0,
            auditReject: false,
            record: {
                message: ''
            }
        }
    },
    created() {
        this.getVisitlist()
        this.getSaleUser()
    },
    methods: {

        // 审核
        updataHandle(flag) {


            if (this.ids == '') {
                this.$message.warning('请输入要操作的数据')
                return
            }

            if (flag == 1) {
                this.$confirm('是否通过审核?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    applyShopVisit({
                        ids: this.ids,
                        status: 1,
                        applyNote: '审核通过',
                    }).then(res => {
                        if (res.flag) {
                            this.$message.success('操作成功')
                            this.getVisitlist()
                        } else {
                            this.$message.warning('操作失败，请重试')
                        }
                    })


                }).catch(() => {
                });
            } else {
                this.auditReject = true
                this.record.message = ''
            }


        },

        sumbitReturnRecord() {
            if (this.record.message == '') {
                this.$message.warning('请输入驳回原因')
                return
            }
            var ids = ''
            this.checkList.forEach(ele => {
                ids += ele.visitId + ','
            })
            applyShopVisit({
                ids: this.ids,
                status: 2,
                applyNote: this.record.message,
            }).then(res => {
                if (res.flag) {
                    this.$message.success('操作成功')
                    this.getVisitlist()
                    this.auditReject = false
                } else {
                    this.$message.warning('操作失败，请重试')
                }
            })


        },

        handleSelectionChange(val) {
            this.ids = ''
            val.forEach(ele => {
                this.ids += ele.visitId + ','
            })
        },


        sendHandle(obj) {
            console.log(obj);

            this.$confirm('佣金是否已发放?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // updateUserPutIsContant({
                //     recordId: obj.recordId
                // }).then(res => {
                //     if (res.flag) {
                //         this.$message.success('记录成功')
                //         this.getSaleUserOrder()
                //     } else {
                //         this.$message.warning('记录失败，请重试')
                //     }
                // })

                this.$message.success('发放成功')

            }).catch(() => {
            });

        },




        // 获取打卡列表
        getVisitlist() {
            listShopVisit({
                page: this.pageNum,
                size: this.pageSize,
                userId: this.selectSaleUserId,
                status: this.selectStatus,
            }).then(res => {
                if (res.flag) {
                    this.tableList = res.data.list
                    this.total = res.data.total
                }
            })
        },

        
        handleSizeChange(val) {
            this.pageSize = val
            this.getVisitlist()
        },
        handleCurrentChange(val) {
            this.pageNum = val
            this.getVisitlist()
        },

        getSaleUser() {
            getSaleUser({
                companyId: 0,
                flag: 1  //  0 进销存查询人员  1 广告牌查询人员
            }).then(res => {
                if (res.flag) {
                    console.log(res);
                    this.saleUserList = res.data.filter(item => {
                        return item.userTag == -3
                    })

                    this.saleUserList.unshift({
                        userId: '-1',
                        userName: '全部',
                    })
                }
            })
        },


    },
}
</script>

<style lang="less" scoped>
.handleBox {
    display: flex;
    align-items: center;
    margin: 15px 0;
}

.handleBox>div {
    margin-right: 16px;
}

.image-control {
    display: block;
    border-radius: 8px;
    width: 100px;
    height: 100px;
    background-color: #fafafa;
}

.paginationBox {
    margin-top: 30px;
    display: flex;
    justify-content: end;
}
</style>